<template>
  <div :style="backgroundStyle" class="background-container">
    <el-container>
      <el-header>
        <div class="box1">
          <h4 @click="backList" id="back">返回列表</h4>
        </div>
      </el-header>
      <el-container>
        <el-aside width="846px">
          <!-- <img src="@/assets/images/result01.png" /> -->
          <div>
            <!-- 卡片式内容区 -->
            <el-card class="box-card">
              <!-- 定义一个div，专门用来放置图表 -->
              <div id="main" style="width: 600px; height: 400px"></div>
            </el-card>
          </div>
        </el-aside>
        <el-main>
          <!-- 患者信息 -->
          <h3 style="color: #6c63ff; margin-top: 20px">其他信息</h3>
          <div class="form-container">
            <el-form
              ref="elForm"
              :model="register"
              size="small"
              label-width="100px"
            >
              <!-- 第一行 -->
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="联系地址" prop="address">
                    <el-input
                      v-model="register.address"
                      placeholder="请输入联系地址"
                      readonly
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="门诊编号" prop="outpatientId">
                    <el-input
                      v-model="register.outpatientId"
                      placeholder="请输入门诊编号"
                      readonly
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="住院编号" prop="admissionId">
                    <el-input
                      v-model="register.admissionId"
                      placeholder="请输入住院编号"
                      readonly
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 第三行 -->
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="现病史历" prop="medicalhistory">
                    <el-input
                      v-model="register.medicalhistory"
                      placeholder="请输入现病史历"
                      readonly
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
/* 引入echarts的支持 */
import * as echarts from "echarts";
export default {
  dicts: [
    "people_ethnic_ffiliation",
    "user_channel_status",
    "patient_medical_status",
    "sys_yes_no",
    "sys_user_sex",
  ],
  data() {
    return {
      // 患者详情对象
      register: {},

      backgroundImage: require("@/assets/images/bg.jpg"),
    };
  },

  methods: {
    // 跳转到列表页面
    backList() {
      // 页面跳转
      this.$router.push({
        // 路径
        path: "/patient/patientInfo/PatientDetails",
        // 查询参数
        query: { register: this.register },
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },

    // 静态图表统计
    jt() {
      // 1.基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 2.指定图表的配置项和数据
      var option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            ["product", "2019", "2020", "2021", "2022", "2023", "2024"],
            ["普通患者人数", 56, 82, 88, 70, 53, 85],
            ["住院人数", 59, 39, 55, 80, 88, 76],
            ["出院人数", 20, 6, 36, 58, 80, 66],
            ["重病患者人数", 20, 31, 41, 18, 33, 29],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: {
              focus: "self",
            },
            label: {
              formatter: "{b}: {@2024} ({d}%)",
            },
            encode: {
              itemName: "product",
              value: "2024",
              tooltip: "2024",
            },
          },
        ],
      };

      myChart.on("updateAxisPointer", function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)",
              },
              encode: {
                value: dimension,
                tooltip: dimension,
              },
            },
          });
        }
      });
      // 3.使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },

  /*
    created():   在 Vue 实例创建完成后被立即调用
    mounted():      在组件挂载完成后被调用。这意味着组件的 DOM 结构已经生成，并且被插入到文档中，此时可以访问组件的 DOM 元素
  
  */
  created() {
    // 接收页面传递过来的参数
    this.register = this.$route.query.register;

    console.log(this.register);
  },
  mounted() {
    this.jt();
  },
  computed: {
    // 设置动态背景样式
    backgroundStyle() {
      return {
        backgroundImage: `url(${this.backgroundImage})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        repeat: "no-repeat",
      };
    },
  },
};
</script>
<style>
.form-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 表单项之间的间距 */
  justify-content: space-between; /* 两行对齐方式 */
  align-items: center;
}

.form-item {
  flex: 1 1 45%; /* 每个表单项占宽度的 45%，可根据需求调整 */
  min-width: 300px; /* 最小宽度，防止过小 */
}
.background-container {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}
#back {
  color: rgb(182, 17, 163);
  font-weight: 700;
}
#back2 {
  color: rgb(182, 17, 163);
  font-weight: 700;
}
.box1 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
